<!--
 * @Autor: 黄旗
 * @Date: 2020-06-02 17:47:27
-->
<template>
    <!-- <div>
        <Timeline v-if="dataList.length > 0" class="main-height">
            <div class="sky-tit">用户足迹</div>
            <TimelineItem v-for="item in dataList" :key="item.id">
                <p class="time">{{ item.created_at_str }}</p>
                <p class="content contentList">{{ item.action_content }}</p>
                <p class="consultant">
                    <span class="c-inr-right" v-if="item.profession_name">{{item.profession_name}}</span>
                    <span class="c-inr-right" v-if="item.operate_name">{{item.operate_name}}</span>
                    <Badge status="processing" :text="item.action_type_str" />
                    <span> &nbsp; </span>
                    <Badge status="success"
                        v-show="item.action_type === '10' &&  item.callback_way_str != '' ? true : false" color="orange"
                        :text="item.callback_way_str" />
                </p>
            </TimelineItem>
            <div class="ivu-pt-16" style="text-align: center">
                <a href="javaScript:;" v-if="this.page.total>dataList.length" @click="load">点击加载更多</a>
                <span v-else>没有更多了</span>
            </div>
        </Timeline>
        <div v-else class="ivu-pt-16" style="min-height: 200px;text-align: center">暂无用户足迹</div>
    </div> -->
    <div>
        <Scroll v-if="!isLast"  :on-reach-bottom="handleReachBottom" height="430" :distance-to-edge="[1, 1]">
            <Timeline v-if="dataList.length > 0" class="main-height">
                <div class="sky-tit">用户足迹</div>
                <TimelineItem v-for="item in dataList" :key="item.id">
                    <p class="time">{{ item.created_at_str }}</p>
                    <p class="content contentList">{{ item.action_content }}</p>
                    <p class="consultant">
                        <span class="c-inr-right" v-if="item.profession_name">{{item.profession_name}}</span>
                        <span class="c-inr-right" v-if="item.operate_name">{{item.operate_name}}</span>
                        <Badge status="processing" :text="item.action_type_str" />
                        <span> &nbsp; </span>
                        <Badge status="success"
                            v-show="item.action_type === '10' &&  item.callback_way_str != '' ? true : false" color="orange"
                            :text="item.callback_way_str" />
                    </p>
                </TimelineItem>
            </Timeline>
            <div v-else class="ivu-pt-16" style="min-height: 200px;text-align: center">暂无用户足迹</div>
        </Scroll>
        <Scroll v-else height="430" :distance-to-edge="[1, 1]">
            <Timeline v-if="dataList.length > 0" class="main-height">
                <div class="sky-tit">用户足迹</div>
                <TimelineItem v-for="item in dataList" :key="item.id">
                    <p class="time">{{ item.created_at_str }}</p>
                    <p class="content contentList">{{ item.action_content }}</p>
                    <p class="consultant">
                        <span class="c-inr-right" v-if="item.profession_name">{{item.profession_name}}</span>
                        <span class="c-inr-right" v-if="item.operate_name">{{item.operate_name}}</span>
                        <Badge status="processing" :text="item.action_type_str" />
                        <span> &nbsp; </span>
                        <Badge status="success"
                            v-show="item.action_type === '10' &&  item.callback_way_str != '' ? true : false" color="orange"
                            :text="item.callback_way_str" />
                    </p>
                </TimelineItem>
            </Timeline>
            <div v-else class="ivu-pt-16" style="min-height: 200px;text-align: center">暂无用户足迹</div>
            <div class="ivu-pt-16" style="text-align: center">没有更多了</div>
        </Scroll>
    </div>
</template>
<script>
    import { PatientInfoFoot } from '@/api/patient'
    export default {
        name: 'Foot',
        data () {
            return {
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                dataList: [],
                id: '',
                isLast: false
            }
        },
        methods: {
            getData (id) {
                this.id = id
                this.page.page = 1
                PatientInfoFoot({
                    patient_user_id: id,
                    page: this.page.page,
                    pageSize: this.page.pageSize
                }).then(res => {
                    this.page.total = res.total
                    this.dataList = res.list
                })
            },
            // load () {
            //     this.page.page = this.page.page + 1
            //     PatientInfoFoot({
            //         patient_user_id: this.id,
            //         page: this.page.page,
            //         pageSize: this.page.pageSize
            //     }).then(res => {
            //         this.page.total = res.total
            //         this.dataList.push(...res.list)
            //     })
            // },
            handleReachBottom () {
                if (this.dataList.length >= this.page.page * this.page.pageSize) {
                    this.page.page++;
                    PatientInfoFoot({
                        patient_user_id: this.id,
                        page: this.page.page,
                        pageSize: this.page.pageSize
                    }).then(res => {
                        this.page.total = res.total
                        this.dataList.push(...res.list)
                    })
                    // gtMessage(this.params).then((res) => {
                    //     this.dialogList.list = this.dialogList.list.concat(res.list);
                    // });
                } else {
                    this.isLast = true;
                    // this.$Message.info('到底啦！');
                }
            }
        }
    }
</script>

<style scoped>
    .sky-tit {
        font-size: 14px;
        font-weight: 700;
        line-height: 56px;
    }

    .c-inr-right {
        margin-right: 10px;
    }

    .main-height {
        /* height: 450px;
        max-height: 480px; */
        /* overflow-y: auto; */
    }

    .contentList {
        margin: 10px 0;
    }

    *::-webkit-scrollbar {
        width: 10px;
        /*对垂直流动条有效*/
        height: 10px;
        /*对水平流动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    *::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 3px;
    }

    /*定义滑块颜色、内阴影及圆角*/
    *::-webkit-scrollbar-thumb {
        border-radius: 7px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #eee;
    }

    /*定义右下角汇合处的样式*/
    *::-webkit-scrollbar-corner {
        background: khaki;
    }
</style>
